import yayJpg from '../assets/yay.jpg';
import { useState } from 'react';
import { AddOutline } from 'antd-mobile-icons';
import { ErrorBlock, Modal, NavBar, PullToRefresh, Toast } from 'antd-mobile';
import { useRequest } from 'ahooks';
import { getManagerAccountList,putManagerAccountSetStatus,postManagerThirdpartLogin,postManagerThirdpartSync } from '@/api/manager';
import AddOrUpdateAccount from '@/components/account';
import BoardingPass from '@/components/boarding/index';
import Loading from '@/components/loading';

export default function HomePage() {
  const { data = [], error, loading,run:runList } = useRequest(getManagerAccountList);
  const [optLoading,setOptloading ] = useState(false);
  const onAdd = async() => {
    const instance = Modal.show({
      title:'添加账号',
      content: <AddOrUpdateAccount 
        onOk={()=>{
          instance.close();
          Toast.show('操作成功');
          runList({});
        }}
        />,
      actions:[],
      showCloseButton: true
    }) 
  }
  const onEdit = async(data:API.AccountDto) =>{
    const instance = Modal.show({
      title:'账号编辑',
      content: <AddOrUpdateAccount 
        data={data} 
        onOk={()=>{
          instance.close();
          Toast.show('操作成功');
          runList({});
        }}
        />,
      actions:[],
      showCloseButton: true
    })
  }
  const onRemove = async(data:API.AccountDto) => {
    try{
        setOptloading(true);
        await putManagerAccountSetStatus({emails:[data.email as string]});
        Toast.show('操作成功');
        setOptloading(false);
        runList({});
    }
    catch(e:any){
      setOptloading(false);
       Toast.show('删除失败');
    }
  }
  const onLogin = async(data:API.AccountDto) => {
      try{
          setOptloading(true);
          const postData = {email:data.email as string,password:data.password as string};
          await postManagerThirdpartLogin(postData);
          setOptloading(false);
          Toast.show('登录成功');
          runList({});
      }
      catch(e){
        setOptloading(false);
        Toast.show('登录失败');
      }
  }
  const onUploadProfile = async(data:API.AccountDto) => {
      try{
          setOptloading(true);
          const postData = {email:data.email as string,password:data.password as string};
          await postManagerThirdpartSync(postData);
          setOptloading(false);
          Toast.show('同步成功');
          runList({});
      }
      catch(e){
        setOptloading(false);
        Toast.show('登录失败');
      }
  }
  const onFresh = async() => {
    runList({});
  }
  return (
    <Loading loading={loading || optLoading}>
      <NavBar back={null} right={<AddOutline className='nav-icon' fontSize={20} onClick={onAdd} />}>
          用户
      </NavBar>
      <div className='body'>
        <PullToRefresh onRefresh={onFresh}>
          {data.length > 0 && data.map(item=><BoardingPass data={item} onEdit={onEdit} onRemove={onRemove} onLogin={onLogin} onUploadProfile={onUploadProfile} key={item.email} />)}
          {data.length ==0 && <ErrorBlock status='default' title="暂无数据" description='下拉刷新试试' />}
        </PullToRefresh>
      </div>
    </Loading>
  );
}
